import {
  Component,
  Injector,
  ElementRef,
  ViewChild,
  OnInit,
} from "@angular/core";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { AppComponentBase } from "@shared/common/app-component-base";
import {
  DemoOneServiceProxy,
  PrepareDto,
  CenterCharDemoDto,
  RightBottomCharDemoDto,
} from "@shared/service-proxies/service-proxies";
import { any } from "codelyzer/util/function";
import * as echarts from "echarts";
@Component({
  templateUrl: "./demo1.component.html",
  styleUrls: ["./demo1.component.less"],
  animations: [appModuleAnimation()],
})
export class Demo1Component extends AppComponentBase implements OnInit {
  @ViewChild("DatePicker") datePicker: ElementRef;
  saving = false;

  constructor(
    injector: Injector,
    private _demoOneService: DemoOneServiceProxy
  ) {
    super(injector);
  }

  getTime = new Date();
  es: any;
  isshow = false;
  yearNum: number;
  monthNum: number;

  monthlyPlanCount: number;
  monthlyPlanProductionCount: number;

  prepareDto: PrepareDto;
  readyValue1: number;
  notReadyValue1: number;
  readyValue2: number;
  notReadyValue2: number;
  readyValue3: number;
  notReadyValue3: number;

  fixed: number;
  strive: number;
  construction: number;

  itemListDto: any = [];

  centerCharDemoDto: CenterCharDemoDto;
  legends: any = [];
  xData: any = [];
  fixedData: any = [];
  striveData: any = [];
  constructionData: any = [];
  supplementData: any = [];
  urgentData: any = [];
  totalData: any = [];

  rightBottomCharDemoDto: RightBottomCharDemoDto;
  legend: any = [];
  YData: any = [];
  technologyData: any = [];
  toolData: any = [];
  materialData: any = [];

  arrNum = [];
  arrCharNum = [];

  ngOnInit(): void {
    this.getTime.setMonth(this.getTime.getMonth() - 1);
    this.yearNum = this.getTime.getFullYear(); //获取完整的年份(4位,1970-????)
    this.monthNum = this.getTime.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  }
  ngAfterViewInit() {
    this.toptime();
    this.leftNews();
    this.clear();
    this._demoOneService
      .getMonthlyPlanCount(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.monthlyPlanCount = result;
      });
    this._demoOneService
      .getMonthlyPlanProductionCount(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.monthlyPlanProductionCount = result;
      });
    this._demoOneService
      .getPrepareTech(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.prepareDto = result;
        this.readyValue1 = this.prepareDto.readyValue;
        this.notReadyValue1 = this.prepareDto.notReadyValue;
        this.zb1();
      });
    this._demoOneService
      .getPrepareTool(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.prepareDto = result;
        this.readyValue2 = this.prepareDto.readyValue;
        this.notReadyValue2 = this.prepareDto.notReadyValue;
        this.zb2();
      });
    this._demoOneService
      .getPrepareMaterial(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.prepareDto = result;
        this.readyValue3 = this.prepareDto.readyValue;
        this.notReadyValue3 = this.prepareDto.notReadyValue;
        this.zb3();
      });
    this._demoOneService
      .getListData(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.itemListDto = result;
      });
    this._demoOneService.getCenter(this.yearNum).subscribe((result) => {
      this.centerCharDemoDto = result;
      this.legends = this.centerCharDemoDto.legend;
      this.xData = this.centerCharDemoDto.xData;
      this.fixedData = this.centerCharDemoDto.fixedData;
      this.striveData = this.centerCharDemoDto.striveData;
      this.constructionData = this.centerCharDemoDto.constructionData;
      this.supplementData = this.centerCharDemoDto.supplementData;
      this.urgentData = this.centerCharDemoDto.urgentData;
      this.totalData = this.centerCharDemoDto.totalData;
      this.centerChar(
        this.legends,
        this.xData,
        this.fixedData,
        this.striveData,
        this.constructionData,
        this.supplementData,
        this.urgentData,
        this.totalData
      );
    });
    this._demoOneService
      .getStrive(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.strive = result;
        this.leftTopChar2(this.strive);
      });
    this._demoOneService
      .getTeamTask(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.arrNum = result;
        this.letfBottomChar(this.arrNum);
      });
    this._demoOneService
      .getModelCount(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.arrCharNum = result;
        this.letfBottomChar7(this.arrCharNum);
      });
    this._demoOneService
      .getModel(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.rightBottomCharDemoDto = result;
        this.legend = this.rightBottomCharDemoDto.legend;
        this.YData = this.rightBottomCharDemoDto.yData;
        this.technologyData = this.rightBottomCharDemoDto.technologyData;
        this.toolData = this.rightBottomCharDemoDto.toolData;
        this.materialData = this.rightBottomCharDemoDto.materialData;
        this.rightBottomChar(
          this.legend,
          this.YData,
          this.technologyData,
          this.toolData,
          this.materialData
        );
        console.log(this.materialData);
      });
    this._demoOneService
      .getFixed(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.fixed = result;
        console.log(this.fixed);
        this.leftTopChar(this.fixed, this.monthlyPlanProductionCount);
      });
    this._demoOneService
      .getConstruction(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.construction = result;
        console.log(this.construction);
        this.leftTopChar3(this.construction, this.monthlyPlanProductionCount);
      });
  }
  init() {
    this.yearNum = this.getTime.getFullYear(); //获取完整的年份(4位,1970-????)
    this.monthNum = this.getTime.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    this.ngAfterViewInit();
  }

  clearArr: any = [];
  clear() {
    // clearInterval(this.zb1Clear);
    // clearInterval(this.zb2Clear);
    // clearInterval(this.zb3Clear);
    this.clearArr.forEach((element) => {
      clearInterval(element);
    });
  }
  toptime() {
    setInterval(function () {
      var myDate = new Date();
      var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var myToday = myDate.getDate(); //获取当前日(1-31)
      var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      var myHour = myDate.getHours(); //获取当前小时数(0-23)
      var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
      var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
      var week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var nowTime;

      nowTime =
        myYear +
        "-" +
        myMonth +
        "-" +
        myToday +
        "&nbsp;&nbsp;" +
        myHour +
        ":" +
        myMinute +
        ":" +
        mySecond +
        "&nbsp;&nbsp;" +
        week[myDay] +
        "&nbsp;&nbsp;";
      //console.log(nowTime);
      $("#time").html(nowTime);
    }, 1000);
  }

  zb1() {
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#62c98d", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },

          data: [
            { value: this.readyValue1, name: "已准备" },
            { value: this.notReadyValue1, name: "未准备" },
          ],
        },
      ],
    };
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb1"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var zb1Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(zb1Clear);
  }
  zb2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb2"));
    // this._demoOneService.getPrepareTool(this.yearNum,this.monthNum).subscribe(result => {
    //   this.prepareDto=result;
    //   this.readyValue=this.prepareDto.readyValue;
    //   this.notReadyValue=this.prepareDto.notReadyValue;
    // });
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#c98b62", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: this.readyValue2, name: "已准备" },
            { value: this.notReadyValue2, name: "未准备" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var zb2Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(zb2Clear);
  }
  zb3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb3"));
    // this._demoOneService.getPrepareMaterial(this.yearNum,this.monthNum).subscribe(result => {
    //   this.prepareDto=result;
    //   this.readyValue=this.prepareDto.readyValue;
    //   this.notReadyValue=this.prepareDto.notReadyValue;
    // });
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#00b7be", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: this.readyValue3, name: "已准备" },
            { value: this.notReadyValue3, name: "未准备" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var zb3Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(zb3Clear);
  }

  centerChar(
    legends,
    xData,
    fixedData,
    striveData,
    constructionData,
    supplementData,
    urgentData,
    totalData
  ) {
    var myChart = echarts.init(document.getElementById("chart1"));
    var option = {
      /*backgroundColor: '#05163B',*/
      tooltip: {
        trigger: "axis",
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true,
          },
          dataView: {
            show: true,
            readOnly: false,
          },
          magicType: {
            show: true,
            type: ["line", "bar"],
          },
          restore: {
            show: true,
          },
          saveAsImage: {
            show: true,
          },
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "0%",
        containLabel: true,
      },
      legend: {
        //data: ["固定", "力争", "在制", "补充", "急件", "总计"],
        data: legends,
        textStyle: {
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac", //X轴文字颜色
            },
          },
        },
      ],
      yAxis: [
        {
          min: 0,
          max: Math.max.apply(null, this.totalData),
          type: "value",
          name: "条数",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#444"],
              width: 1,
              type: "solid",
            },
          },
        },
      ],
      series: [
        {
          name: "固定",
          type: "bar",

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          data: fixedData,
        },
        {
          name: "力争",
          type: "bar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2f89cf",
                },
                {
                  offset: 1,
                  color: "#2f89cf",
                },
              ]),
            },
          },
          // data: [
          //   213,
          //   234,
          //   258,
          //   275,
          //   292,
          //   288,
          //   278,
          //   266,
          //   332,
          //   350,
          //   381,
          //   366,
          //   261,
          //   155,
          //   350,
          //   242,
          //   322,
          //   292,
          //   332,
          //   242,
          //   272,
          //   222,
          //   196,
          // ],
          data: striveData,
        },
        {
          name: "在制",
          type: "bar",

          // data: [
          //   133,
          //   144,
          //   158,
          //   165,
          //   172,
          //   188,
          //   198,
          //   186,
          //   172,
          //   150,
          //   141,
          //   136,
          //   121,
          //   145,
          //   150,
          //   162,
          //   172,
          //   182,
          //   192,
          //   102,
          //   182,
          //   152,
          //   126,
          // ],
          data: constructionData,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#C1B2EA",
                },
                {
                  offset: 1,
                  color: "#8362C6",
                },
              ]),
            },
          },
        },
        {
          name: "补充",
          type: "bar",
          // data: [
          //   223,
          //   354,
          //   228,
          //   275,
          //   282,
          //   348,
          //   358,
          //   216,
          //   332,
          //   230,
          //   221,
          //   266,
          //   341,
          //   415,
          //   330,
          //   222,
          //   312,
          //   282,
          //   172,
          //   262,
          //   352,
          //   242,
          //   336,
          // ],
          data: supplementData,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#62c98d",
                },
                {
                  offset: 1,
                  color: "#62c98d",
                },
              ]),
            },
          },
        },
        {
          name: "急件",
          type: "bar",
          // data: [
          //   123,
          //   154,
          //   128,
          //   175,
          //   182,
          //   148,
          //   158,
          //   116,
          //   132,
          //   130,
          //   121,
          //   166,
          //   141,
          //   115,
          //   130,
          //   122,
          //   112,
          //   182,
          //   172,
          //   162,
          //   152,
          //   142,
          //   136,
          // ],
          data: urgentData,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5085f2",
                },
                {
                  offset: 1,
                  color: "#5085f2",
                },
              ]),
            },
          },
        },
        {
          name: "总计",
          type: "line",
          //yAxisIndex: 1,
          // data: [
          //   264,
          //   287,
          //   707,
          //   756,
          //   822,
          //   487,
          //   588,
          //   160,
          //   323,
          //   303,
          //   213,
          //   663,
          //   413,
          //   153,
          //   303,
          //   223,
          //   123,
          //   823,
          //   723,
          //   623,
          //   523,
          //   423,
          //   366,
          // ],
          data: totalData, //fixedData,
          lineStyle: {
            normal: {
              width: 5,

              shadowColor: "rgba(71,216,190, 0.5)",
              shadowBlur: 10,
              shadowOffsetY: 7,
            },
          },
          itemStyle: {
            normal: {
              color: "#F7AD3E",
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
              borderColor: "#F7AD3E",
            },
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var centerCharClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(centerCharClear);
  }
  leftNews() {
    var c = 0;
    var timer = setInterval(function () {
      c++;
      if (c == 10) {
        $(".myscroll ul").css({ top: "0px" });
        c = 1;
      }
      var t = c * -35;
      $(".myscroll ul")
        .stop()
        .animate({ top: t + "px" }, 5000);
    }, 5000);
    //this.clearArr.push(timer);
  }

  letfBottomChar(arrNum) {
    var myChart = echarts.init(document.getElementById("chart2"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      // legend: {
      //   orient: "vertical",
      //   left: "left",
      // },
      series: [
        {
          name: "班组任务",
          type: "pie",
          radius: "50%",
          center: ["50%", "35%"],
          data: arrNum,
          // [

          //   { value: this.firstValue, name:this.firstName , itemStyle: { color: "#0066FF" } },
          //   { value: this.towValue, name: this.towName, itemStyle: { color: "#33FFCC" } },
          //   { value: this.threeValue, name: this.threeName, itemStyle: { color: "#CC9900" } },
          //   { value: this.fourValue, name: this.fourName, itemStyle: { color: "#FF3366" } },
          //   { value: this.fiveValue, name: this.fiveName, itemStyle: { color: "#3399FF" } },
          // ]
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var letfBottomCharClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(letfBottomCharClear);
  }

  letfBottomChar7(arrCharNum) {
    var myChart = echarts.init(document.getElementById("chart7"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },

      series: [
        {
          type: "pie",
          radius: [20, 100],
          center: ["50%", "35%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 5,
          },
          label: {
            show: true,
          },
          emphasis: {
            label: {
              show: true,
            },
          },
          data: arrCharNum,
          // [
          //   { value: 40, name: "CZ-5" },
          //   { value: 33, name: "CZ-3" },
          //   { value: 28, name: "CZ-5B" },
          //   { value: 22, name: "CZ-7" },
          //   { value: 20, name: "CZ-7A" },
          //   { value: 15, name: "DY" },
          // ],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var letfBottomChar7Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(letfBottomChar7Clear);
  }
  rightBottomChar(legend, YData, technologyData, toolData, materialData) {
    var myChart = echarts.init(document.getElementById("chart3"));
    var color = ["#5085f2", "#f2719a", "#57e7ec"];
    var option = {
      color: color,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        textStyle: {
          color: "#ffffff", //字体颜色
          fontSize: 16,
        },
        //ata: ["缺少工艺", "缺少工装", "缺少材料"],
        data: legend,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLine: {
          //这是x轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "category",
        //data: ["CZ-5", "CZ-5B", "CZ-7", "CZ-7A", "CZ-3B", "CZ-8", "DY"],
        data: YData,
        axisLine: {
          //这是y轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "缺少工艺",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          //data: [320, 302, 301, 334, 390, 330, 320],
          data: technologyData,
        },
        {
          name: "缺少工装",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          //data: [120, 132, 101, 134, 90, 230, 210],
          data: toolData,
        },
        {
          name: "缺少材料",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          //data: [220, 182, 191, 234, 290, 330, 310],
          data: materialData,
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var rightBottomCharClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(rightBottomCharClear);
  }
  leftTopChar(fixed, monthlyPlanProductionCount) {
    var myChart = echarts.init(document.getElementById("chart4"));
    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "50%",
        containLabel: true,
      },
      series: [
        {
          name: "固定项",
          type: "gauge",
          min: 0,
          max: monthlyPlanProductionCount,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value: fixed }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var leftTopCharClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(leftTopCharClear);
  }
  leftTopChar2(strive) {
    var myChart = echarts.init(document.getElementById("chart5"));

    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      series: [
        {
          name: "力争项",
          type: "gauge",
          min: 0,
          max: this.monthlyPlanProductionCount,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value: strive }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var leftTopChar2Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(leftTopChar2Clear);
  }
  leftTopChar3(construction, monthlyPlanProductionCount) {
    var myChart = echarts.init(document.getElementById("chart6"));
    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      series: [
        {
          name: "在制项",
          type: "gauge",
          min: 0,
          max: this.monthlyPlanProductionCount,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value: construction }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var leftTopChar3Clear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(leftTopChar3Clear);
  }
  hiddentop() {
    this.isshow = false;
    $("header-bar").hide();
    $(".m-body").removeClass("m-body");
    $("footer-bar").hide();
  }
  showtop() {
    this.isshow = true;
    $("header-bar").show();
    $(".m-grid--desktop").addClass("m-body");
    $("footer-bar").show();
  }
}
